import React, { useState } from 'react';
import { FileText, Search, Filter, Calendar, User, Download } from 'lucide-react';

interface AuditLog {
  id: string;
  timestamp: string;
  operator: string;
  operationType: string;
  operationObject: string;
  operationDetails: string;
  result: 'success' | 'failure';
  ipAddress?: string;
}

export const AuditLogs: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState('all');
  const [dateRange, setDateRange] = useState('today');

  // Mock data
  const logs: AuditLog[] = [
    {
      id: 'AL001',
      timestamp: '2024-12-01 15:30:25',
      operator: '李管理员',
      operationType: '密钥管理',
      operationObject: '系统密钥',
      operationDetails: '生成新的AES-256加密密钥',
      result: 'success',
      ipAddress: '192.168.1.100'
    },
    {
      id: 'AL002',
      timestamp: '2024-12-01 14:45:18',
      operator: '张门卫',
      operationType: '访客核验',
      operationObject: '访客王小明',
      operationDetails: '扫码核验并放行通过',
      result: 'success',
      ipAddress: '192.168.1.101'
    },
    {
      id: 'AL003',
      timestamp: '2024-12-01 14:20:33',
      operator: '李管理员',
      operationType: '特殊访客管理',
      operationObject: '特殊访客张纠纷',
      operationDetails: '添加新的纠纷类型特殊访客记录',
      result: 'success',
      ipAddress: '192.168.1.100'
    },
    {
      id: 'AL004',
      timestamp: '2024-12-01 13:15:42',
      operator: '王门卫',
      operationType: '访客核验',
      operationObject: '访客李四',
      operationDetails: '扫码核验失败，二维码已过期',
      result: 'failure',
      ipAddress: '192.168.1.102'
    },
    {
      id: 'AL005',
      timestamp: '2024-12-01 10:30:15',
      operator: '李管理员',
      operationType: '门卫管理',
      operationObject: '门卫账号赵五',
      operationDetails: '重置门卫账号密码',
      result: 'success',
      ipAddress: '192.168.1.100'
    }
  ];

  const filteredLogs = logs.filter(log => {
    const matchesSearch = log.operator.includes(searchTerm) || 
                         log.operationType.includes(searchTerm) ||
                         log.operationObject.includes(searchTerm) ||
                         log.operationDetails.includes(searchTerm);
    const matchesFilter = filterType === 'all' || log.operationType === filterType;
    return matchesSearch && matchesFilter;
  });

  const getResultColor = (result: string) => {
    return result === 'success'
      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
      : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
  };

  const getResultText = (result: string) => {
    return result === 'success' ? '成功' : '失败';
  };

  const getOperationTypeColor = (type: string) => {
    switch (type) {
      case '密钥管理':
        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
      case '访客核验':
        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
      case '特殊访客管理':
        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
      case '门卫管理':
        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
    }
  };

  const exportLogs = () => {
    console.log('Exporting audit logs...');
    alert('正在导出审计日志...');
  };

  return (
    <div className="max-w-7xl mx-auto">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">审计日志</h2>
              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                系统操作日志记录与查询
              </p>
            </div>
            <button
              onClick={exportLogs}
              className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
            >
              <Download className="h-4 w-4 mr-2" />
              导出日志
            </button>
          </div>
        </div>

        <div className="p-6">
          {/* Search and filters */}
          <div className="flex flex-col lg:flex-row gap-4 mb-6">
            <div className="flex-1 relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center">
                <Search className="h-5 w-5 text-gray-400" />
              </div>
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="搜索操作人、操作类型或详情..."
              />
            </div>
            
            <div className="flex gap-2">
              <select
                value={filterType}
                onChange={(e) => setFilterType(e.target.value)}
                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
              >
                <option value="all">全部操作</option>
                <option value="密钥管理">密钥管理</option>
                <option value="访客核验">访客核验</option>
                <option value="特殊访客管理">特殊访客管理</option>
                <option value="门卫管理">门卫管理</option>
              </select>
              
              <select
                value={dateRange}
                onChange={(e) => setDateRange(e.target.value)}
                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
              >
                <option value="today">今日</option>
                <option value="week">本周</option>
                <option value="month">当月</option>
                <option value="quarter">本季度</option>
              </select>
            </div>
          </div>

          {/* Log entries */}
          {filteredLogs.length === 0 ? (
            <div className="text-center py-12">
              <FileText className="mx-auto h-12 w-12 text-gray-400 mb-4" />
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                {searchTerm || filterType !== 'all' ? '没有找到匹配的日志' : '暂无审计日志'}
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                {searchTerm || filterType !== 'all' 
                  ? '请尝试调整搜索条件或筛选器'
                  : '系统操作日志将在这里显示'
                }
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              {filteredLogs.map((log) => (
                <div key={log.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <span className={`px-2 py-1 text-xs rounded-full ${getOperationTypeColor(log.operationType)}`}>
                          {log.operationType}
                        </span>
                        <span className={`px-2 py-1 text-xs rounded-full ${getResultColor(log.result)}`}>
                          {getResultText(log.result)}
                        </span>
                        <span className="text-sm text-gray-500 dark:text-gray-500">
                          {log.timestamp}
                        </span>
                      </div>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <div className="flex items-center mb-1">
                            <User className="h-4 w-4 text-gray-400 mr-2" />
                            <span className="text-sm font-medium text-gray-900 dark:text-white">
                              操作人：{log.operator}
                            </span>
                          </div>
                          <p className="text-sm text-gray-600 dark:text-gray-400 ml-6">
                            对象：{log.operationObject}
                          </p>
                          {log.ipAddress && (
                            <p className="text-xs text-gray-500 dark:text-gray-500 ml-6 mt-1">
                              IP：{log.ipAddress}
                            </p>
                          )}
                        </div>
                        
                        <div>
                          <p className="text-sm text-gray-900 dark:text-white font-medium mb-1">
                            操作详情
                          </p>
                          <p className="text-sm text-gray-600 dark:text-gray-400">
                            {log.operationDetails}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};